/*
 * @Description: 单位-全宗-档案类型 导航
 * @Author: Rfan
 * @Date: 2022-02-17 13:36:25
 * @LastEditTime: 2023-02-27 09:25:36
 */

import { memo, useEffect, useState } from 'react';
import { Menu, Select } from 'antd';
import classNames from 'classnames/bind';
import { observer } from 'mobx-react-lite';
import { fetchFondsListByUnitId } from '@/api/fonds';
import { fetchATListByFondId } from '@/api/archivesType';
import { appState } from '@/store/mobx';
import { selectItemByKey } from '@/utils/list';
import type { IArchiveType } from '@/interfaces/archiveType';
import type { IFond } from '@/interfaces/fond';

import styles from './index.module.scss';

const cx = classNames.bind(styles);

const { Option } = Select;

export interface IUFAChangeCallback {
  fondId: number;
  fondItem: IFond;
  atId: number;
  atItem: IArchiveType;
}

const UFANav = ({ type, onChange }: any) => {
  // 全宗列表
  const [fondsList, setFondsList] = useState<IFond[]>([]);
  // 档案类型列表
  const [ATList, setATList] = useState<IArchiveType[]>([]);
  // 选中的全宗
  const [selectFondId, setSelectFondId] = useState(0);
  // 选中的档案类型id
  const [selectATId, setSelectATId] = useState(0);

  // 加载时获取全宗列表，获取成功后默认选中第一条并把第一条返回出去
  useEffect(() => {
    const { unitId } = appState;
    if (unitId) {
      fetchFondsListByUnitId(unitId).then((res) => {
        const _fondList: IFond[] = res.data;
        setFondsList(_fondList);
        setSelectFondId(_fondList[0]?.id);
      });
    }
  }, [appState.unitId]);

  // 切换全宗自动加载档案类型
  useEffect(() => {
    if (selectFondId) {
      fetchATListByFondId(selectFondId, type).then((res) => {
        const _atList: IArchiveType[] = res.data;
        setATList(_atList);
        setSelectATId(_atList[0]?.id);
      });
    }
  }, [selectFondId]);

  useEffect(() => {
    if (selectATId) {
      const fondItem = selectItemByKey(selectFondId, fondsList);
      const atItem = selectItemByKey(selectATId, ATList);
      onChange({ fondId: selectFondId, fondItem, atId: selectATId, atItem });
    }
  }, [selectATId]);

  /**
   * @description: 切换全宗
   * @param {number} val 选中的全宗
   */
  const handleFondChange = (val: number) => {
    setSelectFondId(val);
  };

  /**
   * @description: 切换档案类型
   * @param {any} param1
   */
  const onATSelect = ({ key }: any) => {
    setSelectATId(parseInt(key, 10));
  };

  // 档案类型列表item
  const items = ATList.map((item: IArchiveType) => ({ label: item.atName, key: item.id }));

  return (
    <div className={cx('container')}>
      <Select value={selectFondId} style={{ width: '100%' }} onChange={handleFondChange}>
        {fondsList.map((fond) => (
          <Option key={fond.id} value={fond.id}>
            {fond.fondName}
          </Option>
        ))}
      </Select>
      <h6 className={cx('at-header')}>档案类型列表</h6>
      <div className={cx('at-list-wrap')}>
        <Menu
          items={items}
          selectedKeys={[`${selectATId}`]}
          onSelect={onATSelect}
          style={{ width: 200 }}
        ></Menu>
      </div>
    </div>
  );
};

export default memo(observer(UFANav));
